<!DOCTYPE html>
<html lang="en">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="./js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="./js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<head>
    <title>商品详情页</title>

    <style>
        .disappearBtn{
            display:none;
        }

        .showBtn{
            display:block;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="./css/seckill.css" rel="stylesheet">
    <script type="text/javascript">
        //重复执行success方法；生产环境下不建议使用，很耗费性能
        var seckillId="";
        $(function() {
            let localUrl = window.location.href;
            let args = localUrl.substr(localUrl.lastIndexOf("?") + 1);

            if(!args.match("^seckillId=[0-9]*$")){
                alert("你的参数有问题，按默认查询seckill=1")
                args="seckillId=1";
            }

            queryDetail(args);

            /*$("#seckill-btn").click(function() {
                $.ajax({
                    url: '/seckill/${seckill.seckillId}',
                    type: 'GET',
                    dataType: 'text',
                    success: function(result) {
                        alert(result);
                        console.log(result)
                    }
                });
            });*/
        });
        function startSeckill(){
            $.ajax({
                url:"http://www.supermarket.com/seckills/"+seckillId,
                dataType:"json",
                type:"GET",
                success:function(data){
                    if(data.status===200){
                        alert("秒杀成功");
                    }else if(data.status===202){
                        alert("兄弟你没有登录吧,那我哪知道你是谁?");
                        window.location.href="./login.html";
                    }else{
                        alert("秒杀失败,原因未知,算你倒霉");
                        window.location.href="./seckill-list.html";
                    }
                },
                error:function(){
                    alert("发送失败");
                }
            });
        }
        function queryDetail(args){
            $.ajax({
                url:"http://www.supermarket.com/seckills/detail?"+args,
                dataType:"json",
                type:"GET",
                success:function (data) {
                    if(data!=null){
                        $("#seckill_content").append("<h1>"+data.name+"<small>（秒杀价"+data.seckillPrice+"元）</small></h1>");
                        let nowTime = new Date().getTime();

                        seckillId=data.seckillId;
                        countdown(nowTime,data.startTime,data.endTime);
                    }else{
                        alert("数据有问题");
                    }
                },
                error:function () {
                    alert("发送失败");
                }
            })
        }
        function countdown(nowTime,startTime,endTime){
            /*alert("开始计算");*/
            let countdownBtn = $('#countdown-btn');
            if(nowTime>endTime){
                countdownBtn.html('秒杀结束');
            }else if(nowTime < startTime){
                let killTime = new Date(startTime);
                countdownBtn.countdown(killTime,function(event){
                    let format = event.strftime('秒杀倒计时：%D天 %H时 %M分 %S秒');
                    countdownBtn.html(format);
                }).on('finish.countdown',function(){
                    //倒计时结束后回调事件
                    $('#countdown-div').addClass('disappearBtn');
                    $('#seckill-div').addClass('showBtn');
                })
            }else{
                //执行秒杀
                $('#countdown-div').addClass('disappearBtn');
                $('#seckill-div').addClass('showBtn');
            }
        }
        function success(sekillId){
            $.ajax({
                url: "http://www.supermarket.com/seckills/"+seckillId+"/userPhone",
                type: 'GET',
                dataType: 'json',
                success: function(result) {
                    //console.log(result);
                    let i = 0;
                    let str = "";
                    for(i=0;i<result.length;i++){
                        str += "非常感谢您参与本次秒杀活动，恭喜手机号为"+result[i]+"的幸运用户${seckill.sellPoint}<br/>";
                    }
                    document.getElementById("showSuccess").innerHTML=str;
                }
            });
        }
        window.setInterval("success(seckillId)",1000);
    </script>

</head>
<body>
<div class="container">
    <div class="panel panel-default text-center">
        <div id="seckill_content" class="pannel-heading">

        </div>
        <div class="panel-body"  id="countdown-div">
            <button type="button" class="btn  btn-lg btn-block btn-danger" id="countdown-btn"></button>
        </div>
        <div class="panel-body disappearBtn"  id="seckill-div">
            <button type="button" class="btn btn-primary btn-lg btn-block btn-info" id="seckill-btn" onclick="startSeckill()">开始进入商品秒杀环节</button>
        </div>
        <div id="showSuccess"></div>
    </div>
</div>
</body>
<!-- jQuery countDown倒计时插件 -->
<script src="./js/jquery.countdown.js"></script>

<!-- 计时交互逻辑 -->


<script>

</script>

</html>